<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <title>Sohail</title>
    <link rel="icon" type="image/png" href="Images/icons8-portfolio-48.png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap" rel="stylesheet">
</head>

<body>
    <!-- This site is desinged by Sohail -->
    <!-- The Intro Section -->
    <section>
        <div class="container-fluid intro-div">
            <div class="row">
                <div class="col-xl-6 col-md pt-5 text-center">
                    <h1 class="first-text mt-5 pt-5">I'm</h1>
                    <h1 class="Sohail-text">Sohail</h1>
                    <h6 class="intro-line">A <u>Pro</u>grammer Cum Photographer</h6>
                </div>
                <div class="col-xl-6 col-md pb-3 text-center">
                    <img class="img-fluid w-75 float-right" src="Images/Coding Bench.jpg" alt="Coding Bench">
                </div>
            </div>
        </div>
    </section>

    <!-- Hero Section -->
    <section>
        <div class="px-4 py-5 text-center hero-color">
            <img class="d-block mx-auto mb-4 rounded-image" src="Images/Profile-Photo.jpg" alt="" width="150"
                height="150">
            <h1 class="brown-text">Hello</h1>
            <div class="col-lg-6 mx-auto">
                <p class="mb-4 sarif-text">I am a versatile creative professional, weaving the digital realm with my
                    skills. A
                    programmer and coder by nature, I find solace in crafting intricate websites and designs. My lens
                    captures not just moments but stories as a photographer and cinematographer, adding depth to my
                    creative narrative.</p>
            </div>
        </div>
    </section>

    <!-- My Skills -->
    <section>
        <div class="container-xl mt-5 border border-dashed rounded-5">
            <div>
                <h1 class="brown-text text-center mt-5">My Skills</h1>
            </div>
            <div class="row text-center">
                <div class="col-xl-3 col-md pt-5">
                    <img class="img-fluid w-75" src="Images/Designer.jpg" alt="Designer Image">
                </div>
                <div class="col-xl-9 col-md pt-5">
                    <h2 class="green-text">Design & Development</h2>
                    <p class="sarif-text mx-5 px-5 mt-3">
                        I'm a boundary-pushing designer and developer, seamlessly blending creativity and code. With a
                        knack
                        for crafting captivating aesthetics, I breathe life into a wide spectrum of design
                        possibilities.
                    </p>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-xl-3 col-md pt-5">
                    <img class="img-fluid w-75" src="Images/Photographer.jpg" alt="Photographer Image">
                </div>
                <div class="col-xl-9 col-md pt-5">
                    <h2 class="green-text">Photographer</h2>
                    <p class="sarif-text mx-5 px-5 mt-3">
                        Beyond design and code, my lens tells compelling stories. A seasoned photographer, I capture
                        emotions and moments, infusing my work with a cinematic touch that leaves an indelible
                        impression.
                    </p>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-xl-3 col-md pt-5">
                    <img class="img-fluid w-50" src="Images/Filmmaker.png" alt="Cinematographer Image">
                </div>
                <div class="col-xl-9 col-md pt-5">
                    <h2 class="green-text">Cinematographer</h2>
                    <p class="sarif-text mx-5 px-5 mt-3">
                        As a skilled cinematographer, I transform visions into dynamic realities. Through lens and
                        motion, I
                        create immersive narratives, orchestrating light, angles, and motion to evoke powerful emotions
                        and
                        convey unforgettable tales.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Me Info -->
    <section>
        <div class="position-relative my-5 p-5 text-center text-muted bg-body border border-dashed rounded-5">
            <img class="rounded-image" src="Images/Contact Me.jfif" alt="contact me image" width="150px" height="150px">
            <h1 class="text-body-emphasis brown-text pt-2">Get In Touch</h1>
            <p class="col-lg-6 mx-auto mb-4">
                Feel free to reach out to me through the provided contact details. Whether you have questions, ideas, or
                just want to connect, I'm here to listen and engage in meaningful conversations. Let's connect and
                explore together.
            </p>
            <button class="btn btn-primary" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                    class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                    <path
                        d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z" />
                </svg>
                Contact Me
            </button>
        </div>
    </section>

    <!-- Footer Section -->
    <section>
        <div class="container-fluid footer-bg">
            <footer>
                <div class="signature text-center">
                    <img src="Images/Signature.jpg" alt="Signature Image" width="150" height="150">
                </div>
                <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                    <li class="nav-item"><a href="https://www.instagram.com/thephotophilic_guy/">
                            <button type="button" class="btn btn-outline-light mx-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-instagram" viewBox="0 0 16 16">
                                    <path
                                        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z">
                                    </path>
                                </svg>
                                Instagram
                            </button></a></li>
                    <li class="nav-item"><a href="https://www.facebook.com/sohail.ansari.92505956/">
                            <button type="button" class="btn btn-outline-light mx-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-facebook" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
                                    </path>
                                </svg>
                                Facebook
                            </button></a></li>
                    <li class="nav-item"><a href="https://twitter.com/photophilic_guy">
                            <button type="button" class="btn btn-outline-light mx-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-twitter" viewBox="0 0 16 16">
                                    <path
                                        d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z">
                                    </path>
                                </svg>
                                Twitter
                            </button>
                        </a></li>
                </ul>
                <p class="text-center text-light pb-3">© 2023 Company, Inc</p>
            </footer>
        </div>
    </section>
</body>
</html>
